<!--
 * @Author: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @Date: 2024-05-09 10:25:14
 * @LastEditors: icymoon911 icymoon911@163.com
 * @LastEditTime: 2024-07-25 20:39:04
 * @FilePath: \ken147258.topayClient\src\views\other\order-management\deal-list.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="app-container" v-loading="loading">
    <div class="search-container">
      <FormList :initForm="initSearchForm" v-model:formModel="searchForm"></FormList>
    </div>
    <el-card shadow="never" class="table-container">
      <template #header>
        <!-- <el-button type="primary" @click="handleQuery()"
          ><i-ep-refresh />刷新订单</el-button
        > -->
        <!-- <el-button
          v-hasPerm="['sys:dict_type:add']"
          type="success"
          @click="handleTableBtnClick({}, 'add')"
          ><i-ep-plus />新增</el-button
        > -->
        <!-- <el-text float-right line-height-32px class="mx-1 !mr-[20px]" type="info">更新倒计时：{{
          timeLog
        }}</el-text> -->
      </template>
      <div
        class="info-container border-[#e6e6e6] border-solid border p-[10px] border-l-[5px] mb-[10px]"
      >
        条件总计：成功金额：<span>{{ statInfo.success_amount }}</span
        >元 总订单数：<span>{{ statInfo.total_count }}</span> 成交数：<span>{{
          statInfo.success_count
        }}</span>
        成交率：<span>{{ successRateCom }}</span
        >%
      </div>
      <div
        class="info-container border-[#e6e6e6] border-solid border p-[10px] border-l-[5px] mb-[10px]"
      >
        今日统计：成功金额：<span>{{ statInfo.today_success_amount }}</span
        >元 总订单数：<span>{{ statInfo.today_total_count }}</span> 成交数：<span>{{
          statInfo.today_success_count
        }}</span>
        成交率：<span>{{ todaySuccessRateCom }}</span
        >%
      </div>
      <div
        class="info-container border-[#e6e6e6] border-solid border p-[10px] border-l-[5px] mb-[10px]"
      >
        昨日统计：成功金额：<span>{{ statInfo.yes_success_amount }}</span
        >元 总订单数：<span>{{ statInfo.yes_total_count }}</span> 成交数：<span>{{
          statInfo.yes_success_count
        }}</span>
        成交率：<span>{{ yesterdaySuccessRateCom }}</span
        >%
      </div>
      <div
        class="info-container border-[#e6e6e6] border-solid border p-[10px] border-l-[5px] mb-[10px]"
      >
        订单流量近10分钟 平均<span>{{ statInfo.period_count }}</span
        >单/分钟 成功率<span>{{ orderSuccessRateCom }}</span
        >%
      </div>
      <comTable
        :data="tableDatasCom"
        :config="tableconfig"
        :tableHeader="tableHeader"
        @link-click="handleTableBtnClick"
      >
        <template #pass_show="{ row, index }">
          <el-switch v-model="row.pass_showCom" />
        </template>
        <template #status="{ row, index }">
          <el-tag type="info" effect="dark">{{
            row.status === 1 ? "启用" : "禁用"
          }}</el-tag>
        </template>
        <template #statusCom="{ row, index }">
          <template v-if="row.status.toString() !== '6'">
            <ElTag :type="row.status.toString() === '1' ? 'danger' : 'primary'">{{
              row.statusCom
            }}</ElTag>
          </template>
          <template v-else>
            <ElTag :type="'primary'">
              支付成功<span color-red>
                (回调失败)
                <template v-if="['2', '5', '6'].includes(row.status.toString())">
                  (补)</template
                >
              </span>
            </ElTag>
          </template>
        </template>
        <template #payment_infoCom="{ row, index }">
          <span>{{ row.payment_info }}</span>
          <!-- <template v-if="row.qr_code">
            <el-button type="primary" size="small" h-22px line-height-22px pl-5px pr-5px type="danger" size="small" @click="handleTableBtnClick(row, 'qr_code')">
              （付款凭证）
            </el-button>
          </template> -->
        </template>
      </comTable>

      <pagination
        v-if="tableDatasObj.paging.total > 0"
        v-model:total="tableDatasObj.paging.total"
        v-model:page="tableDatasObj.paging.page"
        v-model:limit="tableDatasObj.paging.limit"
        @pagination="handleQuery"
      />
    </el-card>
    <!-- 弹窗 -->
    <!-- <el-dialog
      v-model="dialog.visible"
      :title="dialog.title"
      :width="dialog.width"
      append-to-body
      @close="closeDialog"
    >
      <FormList
        v-if="initDialogForm.initKeys.length"
        v-model:formRef="formDialogId"
        v-model:formModel="formDialogModel"
        :initForm="initDialogForm"
      ></FormList>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="handleLeftClick">{{
            dialog.leftBtnText
          }}</el-button>
          <el-button @click="handleRightClick">{{ dialog.rightBtnText }}</el-button>
        </div>
      </template>
    </el-dialog> -->
    <el-dialog
      v-model="dialogForConfirm.visible"
      :title="dialogForConfirm.title"
      :width="dialogForConfirm.width"
      append-to-body
      @close="dialogForConfirm.closeDialog"
    >
      <el-descriptions title="" :column="2">
        <el-descriptions-item
          v-for="(key, index) in Object.keys(detailFields)"
          :key="index"
          :label="detailFields[key]"
          >{{ dialogForConfirm.singleData[key] }}</el-descriptions-item
        >
      </el-descriptions>
      <!-- 弹窗底部操作按钮 -->
      <template #footer>
        <div class="dialog-footer">
          <!-- <el-button type="primary" @click="dialogForConfirm.handleLeftClick">{{
            dialogForConfirm.leftBtnText
          }}</el-button> -->
          <el-button @click="dialogForConfirm.handleRightClick">{{
            dialogForConfirm.rightBtnText
          }}</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { watch, inject } from "vue";
import { FormInstance } from "element-plus";
import FormList from "@/components/FormList/index.vue";
import comTable from "@/components/comTable/comTable.vue";
import { list, stat, callbackAgain } from "@/api/other/order";
import { success } from "@/api/other/access";
import { ProductListVO } from "@/api/other/types";
import { usePayProductStore } from "@/store";

const getFormatDate = inject("getFormatDate");
const getTimestamp = inject("getTimestamp");
const tableDatasObj = ref({
  list: [],
  paging: {
    limit: 20,
    page: 1,
    total: 0,
  },
  queryParams: {},
});
const loading = ref(false);

const options = {
  return_status: [
    {
      label: "未回调",
      value: 1,
    },
    {
      label: "回调成功",
      value: 2,
    },
    {
      label: "回调失败",
      value: 3,
    },
  ],
  status: usePayProductStore().getDictionary().status,
  device_type: [
    // {
    //   label: "未知",
    //   value: "0",
    // },
    {
      label: "安卓",
      value: "1",
    },
    {
      label: "苹果",
      value: "2",
    },
    {
      label: "PC",
      value: "3",
    },
  ],
  handle_source: [
    // 1:管理员操作成功；2:码商操作成功
    { value: 1, label: "补" },
    { value: 2, label: "" },
  ],
};

const searchForm = ref({});
const initSearchForm = ref({
  // 表单标签位置
  // labelPosition: "right",
  formAttrs: {
    // 是否内联
    inline: true,
  },
  rowAttrs: {
    // 行内表单数量
    columnsNum: 4,
  },
  // 初始化表单字段
  initKeys: [
    {
      // 类型
      type: "input",
      // 唯一标识
      key: "mer_order_sn",
      // 表单属性
      formAttrs: {
        label: "商户订单号",
        labelWidth: "100px",
      },
      // 控制属性
      controlAttrs: {
        // 提示文本
        placeholder: "请输入商户订单号",
        // 是否可清空
        clearable: true,
      },
      // 控制事件
      controlOn: {},
    },
    {
      // 类型
      type: "input",
      // 唯一标识
      key: "mer_id",
      // 表单属性
      formAttrs: {
        label: "商户号",
        // labelWidth: "100px",
      },
      // 控制属性
      controlAttrs: {
        // 提示文本
        placeholder: "请输入商户号",
        // 是否可清空
        clearable: true,
      },
      // 控制事件
      controlOn: {},
    },
    {
      // 类型
      type: "input",
      // 唯一标识
      key: "ms_name",
      // 表单属性
      formAttrs: {
        label: "收款码商",
        // labelWidth: "120px",
      },
      // 控制属性
      controlAttrs: {
        // 提示文本
        placeholder: "请输入收款码商",
        // 是否可清空
        clearable: true,
      },
      // 控制事件
      controlOn: {},
    },
    {
      // 类型
      type: "select-v2",
      // 唯一标识
      key: "pro_id",
      // 表单属性
      formAttrs: {
        label: "支付渠道",
      },
      // 控制属性
      controlAttrs: {
        // 提示文本
        placeholder: "请选择产品名称",
        // 是否可清空
        clearable: true,
        filterable: true,
        options: [],
      },
      // 控制事件
      controlOn: {},
    },
    {
      // 类型
      type: "range-inputs",
      // 唯一标识
      key: "min_amount_max_amount",
      // 表单属性
      formAttrs: {
        label: "订单金额",
      },
      // 控制属性
      controlAttrs: {
        value: [null, null],
        attrs: [
          {
            // 提示文本
            placeholder: "请输入最小值",
            // 是否可清空
            clearable: true,
            controlsPosition: "right",
            min: 0,
          },
          {
            // 提示文本
            placeholder: "请输入最大值",
            // 是否可清空
            clearable: true,
            controlsPosition: "right",
            min: 0,
          },
        ],
      },
      // 控制事件
      // controlOn: {},
    },
    {
      // 类型
      type: "select",
      // 唯一标识
      key: "device_type",
      // 表单属性
      formAttrs: {
        // label: "用户信息",
        label: "设备类型",
      },
      // 控制属性
      controlAttrs: {
        // placeholder: "请选择用户信息",
        placeholder: "请选择设备类型",
        // 是否可清空
        clearable: true,
      },
      // 选项
      options: options.device_type,
    },
    {
      // 类型
      type: "select",
      // 唯一标识
      key: "status",
      // 表单属性
      formAttrs: {
        label: "订单状态",
      },
      // 控制属性
      controlAttrs: {
        placeholder: "请选择一个订单状态",
        // 是否可清空
        clearable: true,
      },
      // 选项
      options: options.status,
    },
    // {
    //   // 类型
    //   type: "select",
    //   // 唯一标识
    //   key: "return_status",
    //   // 表单属性
    //   formAttrs: {
    //     label: "通知状态",
    //   },
    //   // 控制属性
    //   controlAttrs: {
    //     placeholder: "请选择一个通知状态",
    //   },
    //   // 选项
    //   options: options.return_status,
    // },
    {
      // 类型
      type: "date-picker",
      // 唯一标识
      key: "start_time",
      // 表单属性
      formAttrs: {
        label: "开始时间",
      },
      // 控制属性
      controlAttrs: {
        // 提示文本
        placeholder: "请选择开始时间",
        // 是否可清空
        clearable: true,
        style: {
          width: "100%",
        },
      },
      // value: new Date(),
      // 控制事件
      controlOn: {},
    },
    {
      // 类型
      type: "date-picker",
      // 唯一标识
      key: "end_time",
      // 表单属性
      formAttrs: {
        label: "结束时间",
      },
      // 控制属性
      controlAttrs: {
        // 提示文本
        placeholder: "请选择结束时间",
        // 是否可清空
        clearable: true,
        style: {
          width: "100%",
        },
      },
      // 控制事件
      controlOn: {},
    },
    {
      // 类型
      type: "buttons",
      // 按钮
      btns: [
        {
          // 文本
          text: "搜索",
          // 控制属性
          controlAttrs: {
            // 类型
            type: "primary",
            icon: "search",
          },
          // 控制事件
          controlOn: {
            // 点击
            click: (e: Event, formRef: FormInstance, data: object) => {
              formRef.validate((valid) => {
                if (valid) {
                  console.log("fields", data);
                  tableDatasObj.value.paging.page = 1;

                  let tempData = { ...data };

                  data.min_amount_max_amount = data.min_amount_max_amount || [];
                  tempData.min_amount = data.min_amount_max_amount[0];
                  tempData.max_amount = data.min_amount_max_amount[1];

                  delete tempData.min_amount_max_amount;

                  tableDatasObj.value.queryParams = tempData;

                  handleQuery(tableDatasObj.value.paging);
                }
              });
            },
          },
        },
        {
          // 文本
          text: "重置",
          // 控制属性
          controlAttrs: {
            icon: "refresh",
          },
          // 控制事件
          controlOn: {
            // 点击
            click: resetQuery,
          },
        },
      ],
    },
  ],
});

(async () => {
  initSearchForm.value.initKeys[3].controlAttrs.options = (
    await usePayProductStore().loadPayProducts()
  ).map((item) => ({
    label: item.pro_name,
    value: item.id,
  }));
})();

/** 重置查询 */
function resetQuery(e: Event, formRef: FormInstance, data: object) {
  // 重置表单
  formRef.resetFields();
  // formRef.resetFields();
  // 查询
  tableDatasObj.value.paging.page = 1;
  tableDatasObj.value.paging.limit = 20;
  tableDatasObj.value.queryParams = { ...searchForm.value };
  const params = {
    ...tableDatasObj.value.queryParams,
    ...data,
    ...tableDatasObj.value.paging,
  };

  handleQuery(params);
}

// 表*********************************************
const tableDatasCom = computed(() => {
  return tableDatasObj.value.list.map((item: ProductListVO) => {
    // const return_statusCom = options.return_status.find(
    //   (tItem) => tItem.value.toString() === item.return_status.toString()
    // )?.label;

    return {
      ...item,
      pass_showCom: item.pass_show === 1 ? true : false,
      createtimeCom: getFormatDate(item.createtime),
      success_timeCom: getFormatDate(item.success_time),
      updatetimeCom:
        item.status.toString() === "2" ||
        item.status.toString() === "5" ||
        item.status.toString() === "6"
          ? getFormatDate(item.updatetime)
          : "-",
      // return_statusCom: options.return_status.find(
      //   (tItem) => tItem.value.toString() === item.return_status.toString()
      // )?.label,
      statusCom:
        options.status.find((tItem) => tItem.value.toString() === item.status.toString())
          ?.label || "支付成功",
      device_typeCom: options.device_type.find(
        (tItem) => tItem.value.toString() === item.device_type.toString()
      )?.label,
      // orderPayCom: item.orderPay ? `收款人：${item.orderPay?.real_name}${item.orderPay.qq ? ' QQ：' + item.orderPay.qq : ''}` : '-'
      orderPayCom: item.skInfo,
      qr_code: (item?.orderPay?.images || [])[0],
      viewing_timeCom: getFormatDate(item.viewing_time),
      handle_sourceCom: options.handle_source.find(
        (tItem) => tItem.value.toString() === item.handle_source.toString()
      )?.label,
      // orderPayCom: "sdtgredyhg",
    };
  });
});
const tableconfig = {
  // tableHeight: 480, //表格高度
  isSelection: false, //显示复选框
  isRowClick: false, //使用行点击
  isStripe: true, //隐藏斑马纹，与背景色不可同时用
  isShowSummary: false, //显示共计
  isIndex: true, //自定义序号
  isNeedPagination: true, //是否需要分页
};
const tableHeader = [
  { label: "商户订单号", prop: "mer_order_sn", width: 200 },
  { label: "商户号", prop: "mer_id", width: 100 },
  { label: "收款码商", prop: "ms_name", width: 200 },
  { label: "支付渠道", prop: "pro_name", width: 200 },
  { label: "订单金额", prop: "amount", width: 200 },
  { label: "实际支付金额", prop: "real_amount", width: 200 },
  { label: "订单状态", prop: "statusCom", width: 220, type: "slot" },
  { label: "收款信息", prop: "orderPayCom", width: 280 },
  { label: "付款信息", prop: "payment_infoCom", width: 280, type: "slot" },
  { label: "查看凭证时间", prop: "viewing_timeCom", width: 200 },
  // { label: "用户信息", prop: "device_typeCom", width: 200 },
  { label: "设备类型", prop: "device_typeCom", width: 200 },
  // { label: "跑分平台订单号", prop: "mer_order_sn", width: 200 },
  { label: "拉单时间", prop: "createtimeCom", width: 200 },
  { label: "支付时间", prop: "success_timeCom", width: 200 },
  // { label: "商户收入", prop: "income_amount", width: 200 },
  // { label: "回调状态", prop: "return_statusCom", width: 200 },
  {
    label: "操作",
    isSort: false,
    prop: "operation",
    columnAttrs: {
      fixed: "right",
      width: "300",
    },
    children: [
      {
        type: "button",
        btnText: "完成订单",
        title: "wanchengdingdan",
        controlAttrsFunc: (obj) => {
          let result = {};

          if (obj.status.toString() === "1") {
          } else {
            if (!result.style) {
              result.style = {};
            }
            result.style.display = "none";
          }

          return result;
        },
      },
      {
        type: "button",
        btnText: "补发通知",
        title: "bufatongzhi",
        controlAttrsFunc: (obj) => {
          let result = {
            icon: "edit-pen",
            link: false,
            type: "danger",
          };

          if (obj.status.toString() === "2" || obj.status.toString() === "6") {
          } else {
            if (!result.style) {
              result.style = {};
            }
            result.style.display = "none";
          }

          return result;
        },
      },
      {
        type: "button",
        btnText: "详情",
        title: "detail",
        controlAttrsFunc: (obj) => {
          let result = {
            icon: "edit-pen",
            link: false,
            type: "primary",
          };

          return result;
        },
      },
    ],
  },
];

/**
 * 查询
 */
function handleQuery(paging: { page: number; limit: number }) {
  loading.value = true;
  list({ ...tableDatasObj.value.paging, ...tableDatasObj.value.queryParams })
    .then((res) => {
      tableDatasObj.value.list = res.list;
      tableDatasObj.value.paging.total = res.total;

      options.status = Object.keys(res.statusName).map((key) => ({
        label: res.statusName[key],
        value: key,
      }));

      Object.keys(options).map((key) => {
        const item = initSearchForm.value.initKeys;
        const i = item.findIndex((item) => item.key === key);

        if (i > -1) {
          const control = initSearchForm.value.initKeys[i].controlAttrs;
          if (!(control.options && control.options.length)) {
            initSearchForm.value.initKeys[i].controlAttrs.options = options[key];
          }
        }
      });
    })
    .finally(() => {
      loading.value = false;
    });

  loadstat();
  // if (tableDatasObj.paging.typeCode) {
  // loading.value = true;
  // getDictPage(queryParams)
  //   .then(({ data }) => {
  //     dictList.value = data.list;
  //     total.value = data.total;
  //   })
  //   .finally(() => (loading.value = false));
  // }
}

const statInfo = ref({});
const successRateCom = computed(() => {
  return statInfo.value.total_count
    ? ((statInfo.value.success_count * 100) / statInfo.value.total_count).toFixed(2)
    : 0;
});
const todaySuccessRateCom = computed(() => {
  return statInfo.value.today_total_count
    ? (
        (statInfo.value.today_success_count * 100) /
        statInfo.value.today_total_count
      ).toFixed(2)
    : 0;
});
const yesterdaySuccessRateCom = computed(() => {
  return statInfo.value.yes_total_count
    ? ((statInfo.value.yes_success_count * 100) / statInfo.value.yes_total_count).toFixed(
        2
      )
    : 0;
});
const orderSuccessRateCom = computed(() => {
  return statInfo.value.period_count
    ? ((statInfo.value.period_success_count * 100) / statInfo.value.period_count).toFixed(2)
    : 0;
});

// 统计
function loadstat() {
  // loading.value = true;
  stat(tableDatasObj.value.queryParams)
    .then((res) => {
      statInfo.value = res;
    })
    .finally(() => (loading.value = false));
}
// 完*********************************************

const initDialogForm = ref({
  // 表单标签位置
  formAttrs: {
    // 是否内联
    // inline: true,
    labelPosition: "top",
  },
  rowAttrs: {
    // 行内表单数量
    columnsNum: 1,
  },
  // 初始化表单字段
  initKeys: <any>[],
});

const isHasOptions = [
  {
    // 标签
    label: "关闭",
    // 值
    value: 0,
  },
  {
    // 标签
    label: "开启",
    // 值
    value: 1,
  },
];

function handleTableBtnClick(row: object, title: string) {
  dialog.type = title;
  dialog.visible = true;

  if (title === "add") {
    // 新增支付产品
    dialog.title = "新增支付产品";
    dialog.leftBtnText = "确 定";
    dialog.rightBtnText = "取 消";

    initDialogForm.value.initKeys.push(
      ...[
        // 产品名称
        // 通道代码
        // 通道显示
        // 状态
        {
          // 类型
          type: "input",
          // 唯一标识
          key: "qqq5",
          // 表单属性
          formAttrs: {
            label: "产品名称",
          },
          // 控制属性
          controlAttrs: {
            // 提示文本
            placeholder: "请输入产品名称",
            // 是否可清空
            clearable: true,
          },
          // 控制事件
          controlOn: {},
        },
        {
          // 类型
          type: "input",
          // 唯一标识
          key: "qqq5",
          // 表单属性
          formAttrs: {
            label: "通道代码",
          },
          // 控制属性
          controlAttrs: {
            // 提示文本
            placeholder: "请输入通道代码",
            // 是否可清空
            clearable: true,
          },
          // 控制事件
          controlOn: {},
        },
        {
          // 类型
          type: "switch",
          // 唯一标识
          key: "qqq5",
          // 表单属性
          formAttrs: {
            label: "通道显示",
          },
          // 控制属性
          controlAttrs: {
            value: false,
          },
          // 控制事件
          controlOn: {},
        },
        {
          // 类型
          type: "switch",
          // 唯一标识
          key: "qqq5",
          // 表单属性
          formAttrs: {
            label: "状态",
          },
          // 控制属性
          controlAttrs: {
            value: false,
          },
          // 控制事件
          controlOn: {},
        },
      ]
    );
  } else if (title === "channel-allocation") {
    // 渠道配置
    dialog.title = "渠道配置";
    dialog.leftBtnText = "确 定";
    dialog.rightBtnText = "取 消";

    initDialogForm.value.initKeys.push(
      ...[
        {
          // 类型
          type: "input",
          // 唯一标识
          key: "qqq5",
          // 表单属性
          formAttrs: {
            label: "自定义引导语",
          },
          // 控制属性
          controlAttrs: {
            // 提示文本
            // placeholder: "用户名/昵称/手机号",
            // 是否可清空
            clearable: true,
          },
          // 控制事件
          controlOn: {},
        },
        {
          // 类型
          type: "select",
          // 唯一标识
          key: "qqq1",
          // 表单属性
          formAttrs: {
            label: "支付页面是否提交姓名",
          },
          // 控制属性
          controlAttrs: {
            value: 0,
          },
          // 选项
          options: isHasOptions,
        },
        {
          // 类型
          type: "select",
          // 唯一标识
          key: "qqq1",
          // 表单属性
          formAttrs: {
            label: "锁码",
          },
          // 控制属性
          controlAttrs: {
            value: 0,
          },
          // 选项
          options: isHasOptions,
        },
        {
          // 类型
          type: "select",
          // 唯一标识
          key: "qqq1",
          // 表单属性
          formAttrs: {
            label: "订单金额浮动",
          },
          // 控制属性
          controlAttrs: {
            value: 0,
          },
          // 选项
          options: isHasOptions,
        },
        {
          // 类型
          type: "input",
          // 唯一标识
          key: "qqq5",
          // 表单属性
          formAttrs: {
            label: "订单浮动金额个数",
          },
          // 控制属性
          controlAttrs: {
            // 提示文本
            // placeholder: "用户名/昵称/手机号",
            // 是否可清空
            clearable: true,
          },
          // 控制事件
          controlOn: {},
        },
        {
          // 类型
          type: "select",
          // 唯一标识
          key: "qqq1",
          // 表单属性
          formAttrs: {
            label: "订单金额不下浮(优先)",
          },
          // 控制属性
          controlAttrs: {
            value: 0,
          },
          // 选项
          options: isHasOptions,
        },
        {
          // 类型
          type: "select",
          // 唯一标识
          key: "qqq1",
          // 表单属性
          formAttrs: {
            label: "订单金额不上浮",
          },
          // 控制属性
          controlAttrs: {
            value: 0,
          },
          // 选项
          options: isHasOptions,
        },
        {
          // 类型
          type: "select",
          // 唯一标识
          key: "qqq1",
          // 表单属性
          formAttrs: {
            label: "确认收款是否需要确认安全码",
          },
          // 控制属性
          controlAttrs: {
            value: 0,
          },
          // 选项
          options: isHasOptions,
        },
        {
          // 类型
          type: "select",
          // 唯一标识
          key: "qqq1",
          // 表单属性
          formAttrs: {
            label: "自动刷新时是否只显示未支付订单",
          },
          // 控制属性
          controlAttrs: {
            value: 0,
          },
          // 选项
          options: isHasOptions,
        },
        {
          // 类型
          type: "select",
          // 唯一标识
          key: "qqq1",
          // 表单属性
          formAttrs: {
            label: "确认收款时是否确认信息",
          },
          // 控制属性
          controlAttrs: {
            value: 0,
          },
          // 选项
          options: isHasOptions,
        },
        {
          // 类型
          type: "select",
          // 唯一标识
          key: "qqq1",
          // 表单属性
          formAttrs: {
            label: "码商设置收款码金额区间",
          },
          // 控制属性
          controlAttrs: {
            value: 0,
          },
          // 选项
          options: isHasOptions,
        },
        {
          // 类型
          type: "input",
          // 唯一标识
          key: "qqq5",
          // 表单属性
          formAttrs: {
            label: "收款码收款最小金额(码商设置收款码金额区间关闭后才有作用)",
          },
          // 控制属性
          controlAttrs: {
            // 提示文本
            // placeholder: "用户名/昵称/手机号",
            // 是否可清空
            clearable: true,
          },
          // 控制事件
          controlOn: {},
        },
        {
          // 类型
          type: "input",
          // 唯一标识
          key: "qqq5",
          // 表单属性
          formAttrs: {
            label: "收款码收款最大金额(码商设置收款码金额区间关闭后才有作用)",
          },
          // 控制属性
          controlAttrs: {
            // 提示文本
            // placeholder: "用户名/昵称/手机号",
            // 是否可清空
            clearable: true,
          },
          // 控制事件
          controlOn: {},
        },
        {
          // 类型
          type: "select",
          // 唯一标识
          key: "qqq1",
          // 表单属性
          formAttrs: {
            label: "是否展示通道",
          },
          // 控制属性
          controlAttrs: {
            value: 0,
          },
          // 选项
          options: isHasOptions,
        },
      ]
    );
  } else if (title === "rate-adjustment") {
    // 调整费率
    dialog.title = "调整费率";
    dialog.leftBtnText = "上 调";
    dialog.rightBtnText = "下 调";
    initDialogForm.value.initKeys.push(
      ...[
        {
          // 类型
          type: "input",
          // 唯一标识
          key: "rate",
          // 表单属性
          formAttrs: {
            // label: "自定义引导语",
          },
          // 控制属性
          controlAttrs: {
            // 提示文本
            placeholder: "请输入需要调整的费率",
            // 是否可清空
            clearable: true,
          },
          appendTxt: "%",
          // 控制事件
          controlOn: {},
        },
      ]
    );
  } else if (title === "set-rate") {
    // 设置费率
    dialog.title = "调整码商费率（统一按照百分比计算）";
    dialog.leftBtnText = "确 定";
    dialog.rightBtnText = "取 消";
    initDialogForm.value.initKeys.push(
      ...[
        {
          // 类型
          type: "input",
          // 唯一标识
          key: "rate",
          // 表单属性
          formAttrs: {
            label: "自定义引导语",
          },
          // 控制属性
          controlAttrs: {
            // 提示文本
            placeholder: "请输入需要设置的费率",
            // 是否可清空
            clearable: true,
          },
          appendTxt: "%",
          // 控制事件
          controlOn: {},
        },
      ]
    );
  } else if (title === "clearing-rate") {
    dialog.visible = false;

    ElMessageBox.confirm("确定要将所有码商费率清0吗？", "将所有码商费率清0", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }).then(() => {
      // 访问接口；刷新列表
    });
  } else if (title === "detail") {
    dialog.visible = false;
    dialogForConfirm.visible = true;
    dialogForConfirm.singleData = tableDatasCom.value.find((item) => item.id === row.id);
  } else if (title === "bufatongzhi") {
    dialog.visible = false;

    ElMessageBox.confirm("确定要补发通知吗？", "发送通知", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }).then(() => {
      // 访问接口；刷新列表
      let params = {
        order_id: row.id,
      };
      callbackAgain(params).then(() => {
        ElMessage.success("补发通知成功");
        handleQuery();
      });
    });
  } else if (title === "wanchengdingdan") {
    dialog.visible = false;

    ElMessageBox.prompt("确定要完成订单吗？", "敏感操作", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      inputPattern: /[\d,\w]{1,10}/,
      inputPlaceholder: "请输入Google验证码",
      inputErrorMessage: "请输入正确的Google验证码",
      beforeClose: (action, instance, done) => {
        if (action === "confirm") {
          const value = instance.inputValue;

          let params = { order_id: row.id, google_code: value.trim() };
          success(params).then(() => {
            ElMessage.success("修改成功");
            done();
            handleQuery();
          });
        } else {
          done();
        }

        return;
      },
    });

    // ElMessageBox.confirm("确定要完成订单吗？", "完成订单", {
    //   confirmButtonText: "确定",
    //   cancelButtonText: "取消",
    //   type: "warning",
    // }).then(() => {
    //   // 访问接口；刷新列表
    //   let params = {
    //     order_id: row.id,
    //   };
    //   success(params).then(() => {
    //     ElMessage.success("修改成功");
    //     handleQuery();
    //   });
    // });
  } else if (title === "qr_code") {
    dialog.visible = false;

    ElMessageBox({
      title: "查看付款凭证",
      center: true,
      showConfirmButton: false,
      message: h(ElImage, {
        src: import.meta.env.VITE_APP_BASE_API + row.qr_code,
        fit: "contain",
        style: {
          width: "220px",
        },
      }),
    });
    // 删除
  }
}

const detailFields = ref({
  mer_order_sn: "商户订单号",
  // pay_product_id: "支付产品id",
  pro_name: "支付产品名称",
  // mer_id: "商户id",
  order_sn: "平台订单号",
  amount: "金额",
  service_fee: "手续费",
  real_amount: "实际到账金额",
  notify_url: "异步通知地址",
  return_url: "同步通知地址",
  statusCom: "订单状态",
  income_amount: "收入金额",
  return_statusCom: "通知状态",
  time_stamp: "接口调用时间戳",
  createtimeCom: "拉单时间",
  success_timeCom: "支付时间",
  remark: "备注",
  // is_deleteCom: "是否删除",
});

// 弹窗对象
const dialog = reactive({
  visible: false,
  type: "user-form",
  width: 800,
  title: "",
  leftBtnText: "确 定",
  rightBtnText: "取 消",
});
const dialogForConfirm = reactive({
  visible: false,
  type: "user-form",
  width: 600,
  title: "交易详情",
  leftBtnText: "确 定",
  rightBtnText: "取 消",
  singleData: {},
  closeDialog() {
    dialogForConfirm.visible = false;
  },
  handleLeftClick() {
    // let params = {
    //   id: dialogForConfirm.singleData.id,
    // };
    // confirmOrder(params).then(() => {
    //   ElMessage.success("确认收款成功");
    //   dialogForConfirm.closeDialog();
    //   handleQuery();
    // });
  },
  handleRightClick() {
    dialogForConfirm.closeDialog();
  },
});

let formDialogId = ref<FormInstance>();

/**
 * 关闭弹窗
 *
 * @param type 弹窗类型  用户表单：user-form | 用户导入：user-import
 */
function closeDialog() {
  // formDialogId.value?.resetFields();
  // formDialogId.value?.clearValidate();
  formDialogId.value = {};
  formDialogModel.value = {};
  initDialogForm.value.initKeys.splice(0);
  dialog.visible = false;
}

let formDialogModel = ref({});
function handleLeftClick() {
  // formDialogId.

  closeDialog();
}
function handleRightClick() {
  // formDialogId.
  closeDialog();
}

const isHasRefreshQuery = ref(true);
let setIntervalHandle = 0;
let setIntervalTimeLogHandle = 0;
const waitTime = 10000;
function handleAutoRefreshChange(val) {
  if (val) {
    // setIntervalHandle = setInterval(() => {
    //   handleQuery();
    //   loading.value = false;
    // }, waitTime);
    setIntervalTimeLogHandle = setInterval(() => {
      timeLog.value = timeLog.value - 1;

      if (timeLog.value === 0) {
        handleQuery();
        timeLog.value = waitTime / 1000;
      }
    }, 1000);
  } else {
    clearInterval(setIntervalHandle);
    clearInterval(setIntervalTimeLogHandle);
  }
}

const timeLog = ref(waitTime / 1000);

onActivated(() => {
  // handleAutoRefreshChange(isHasRefreshQuery.value);
});
onDeactivated(() => {
  // handleAutoRefreshChange(false);
});

onMounted(() => {
  tableDatasObj.value.queryParams = { ...searchForm.value };

  handleQuery(tableDatasObj.value.paging);

  // handleAutoRefreshChange(true);
});
</script>

<style lang="scss" scoped>
.info-container {
  font-size: var(--el-font-size-extra-small);

  span {
    background-color: #1e9fff;
    display: inline-block;
    padding: 0 10px;
    margin: 0 5px;
    color: #fff;
  }
}
</style>
